<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./OL_SDK/include-openlayers-local.js"></script>
  <script src="./libs/gaode.js"></script>
</head>

<body>
  <div id="map">
  </div>
  <script>
    var map = new ol.Map({
      target: "map",
      layers: [gaode],
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [114.30, 30.50],
        zoom: 4
      })
    })
    /* canvas-style */
    /* 创建一个空的图层 */
    let source = new ol.source.Vector({})
    let layer = new ol.layer.Vector({
      source
    })
    map.addLayer(layer)
    /* 初始化canvas-style */
    /* 设置canvas的大小 */
    let size = 100;
    let canvas = document.createElement("canvas");
    //设置半径
    canvas.width = size;
    canvas.height = size;
    let radius = size / 4;
    /* 绘制 */
    let ctx = canvas.getContext("2d");
    ctx.beginPath()
    ctx.arc(50, 50, radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = "#652e80";
    ctx.fill();
    /* 将创建的canvas元素作为openlayer的样式实现了 */
    let style = new ol.style.Style({
      image: new ol.style.Icon({
        img: canvas,
        imgSize: [canvas.width, canvas.height]
      })
    })
    /* Feature */
    var point = new ol.Feature({
      geometry: new ol.geom.Point([114.30, 30.50])
    })
    point.setStyle(style);
    source.addFeature(point)
    /* setCanvasStyle */
  </script>
</body>

</html>